<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>Finalove-App</title>
	<link rel="stylesheet" href="../../resource/font/css/font-awesome.min.css">
	<link rel="stylesheet" href="../../resource/css/mint.css">
	<link rel="stylesheet" href="../../resource/css/style.css">
	<script src="../../resource/js/vue.js"></script>
	<script src="../../resource/js/mint.min.js"></script>
	<script src="../../resource/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
	<div id="main">
		<mt-header fixed title="消息"></mt-header>
		
		<div class="mt-tab-container-div">
			<h4>api return data(number): {{api_data.number}}</h4>
			<h4>api return data(string): {{api_data.string}}</h4>
			<h4>api return data(array):{{api_data.array}}</h4>
			<mt-button type="primary" size="large" @click="test_api">test api</mt-button>
			<h4>消息推送测试(uid = 42)：</h4>
			<h4>消息:{{show_data}}</h4>
		</div>

		<div class="mint-tabbar is-fixed">
			<a class="mint-tab-item  is-selected">
				<div class="mint-tab-item-icon">
					<img src="../../resource/icon/msg.png">
				</div>
				<div class="mint-tab-item-label">消息</div>
			</a>
			<a class="mint-tab-item" href="../friend/index.html">
				<div class="mint-tab-item-icon">
					<img src="../../resource/icon/user_list.png">
				</div>
				<div class="mint-tab-item-label" style="color:#333333">通信录</div>
			</a>
			<a class="mint-tab-item" href="../index.html">
				<div class="mint-tab-item-icon">
					<img src="../../resource/icon/home.png">
				</div>
				<div class="mint-tab-item-label" style="color:#333333">首页</div>
			</a>
			<a class="mint-tab-item" href="../find/index.html">
				<div class="mint-tab-item-icon">
					<img src="../../resource/icon/find.png">
				</div>
				<div class="mint-tab-item-label" style="color:#333333">发现</div>
			</a>
			<a class="mint-tab-item" href="../me/index.html">
				<div class="mint-tab-item-icon">
					<img src="../../resource/icon/user.png">
				</div>
				<div class="mint-tab-item-label" style="color:#333333">我的</div>
			</a>
		</div>
	</div>
	<script type="text/javascript">
		var main = new Vue({
			el:"#main",
			data:{
				api_data:"",
				show_data:""
			},
			mounted:function() {
				this.init();
			},
			methods:{
				init() {
					document.addEventListener('plusready',function () {
						// 在这里调用h5 plus api
						// 沉浸式导航栏
						plus.navigator.setFullscreen(true);
					},false);
					$.getJSON('../../resource/config.json',function(res){
						main.api_prefix = res.api_prefix;
						main.api_key = res.api_key;
					});
				},
				test_api() {
					var url = this.api_prefix + "index/index";
					var param = {
						api_key:this.api_key,
						params:{
							number:123,
							str:"爱的色放的",
							arr:[1,2,3,['a','b']]
						}
					}
					$.post(url,param,function(res) {
						main.$toast(res.msg);
						main.api_data = res.data;
					})
				}
			}
		});
		// 消息推送测试
		var ws = new WebSocket('wss://www.finalove.top/websocket');
		ws.onopen = function(){
			var uid = "uid:42";
			ws.send(uid);
		};
		ws.onmessage = function(e){
			// 右下侧弹窗
			var data = JSON.parse(e.data);
			main.show_data = data.msg;
		}
	</script>
</body>
</html>
